<template>
	<view class="container">
		<view class="box">
			<view class="item border-b">
				<view>头像</view>
                <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <image class="avatar" :src="imgUrl" v-if="!avatarUrl"></image>
                    <image class="avatar" :src="avatarUrl"></image>
                    <view class="up">上传头像</view>
                </button>
			</view>
			<view class="item border-b">
				<view>昵称</view>
                <input type="nickname" class="info-name" maxlength="15" placeholder="请输入昵称" v-model="name" @blur="blur" />
			</view>
            <view class="item">
            	<view>电话</view>
                <input type="number" class="info-name" placeholder="请获取手机号码" v-model="mobile" disabled />
                <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn1">修改手机号码</button>
            </view>
		</view>
		<view class="btn" @click="submit">确认</view>
	</view>
</template>

<script>
    const defaultAvatarUrl = '../../static/icon/avatar.png'
    import { API_URL } from '@/static/js/common.js';
	export default{
		data() {
			return {
				URL: API_URL, //上传图片用的
				imgUrl: defaultAvatarUrl,
				avatarUrl: '',
                name: '',
                mobile: '',
			}
		},
		onLoad() {
            this.getInfo()
		},
		methods: {
            // 修改昵称
            blur(e) {
                console.log(e)
                this.name = e.detail.value
            },
            
            // 确认
			submit() {
                if (!this.avatarUrl) {
                    this.$toast('请上传头像！');
                    return
                }
                if (!this.name) {
                    this.$toast('请输入姓名！');
                    return
                }
                if(!this.mobile){
                	this.$toast('手机号不能为空')
                	return
                }
                // if(!this.$checkPhone(this.mobile)){
                // 	this.$toast('请输入正确的手机号')
                // 	return
                // }
                this.$ajax('editInfo', {
                	userToken: this.$getSync('userToken'),
                    image_uri: this.avatarUrl,
                    nickname: this.name,
                    mobile: this.mobile,
                }).then(ret => {
                	if (ret.status == 0) {
                		this.$toast('提交成功');
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            // 修改头像
            onChooseAvatar(e) {
                console.log(e)
            	uni.uploadFile({
            	    url: this.URL + 'api/v1/upload', //仅为示例，并非真实接口地址。
            		filePath: e.detail.avatarUrl,
            	    name: 'imgFile',
            	    formData: {
            	        type: 'image',
            	        path: 'upload',
            	        module: 'api'
            	    },
            	    success: result => {
            	        console.log(result)
            	        let data = JSON.parse(result.data).data; //后台返回的路径data.attach_uri
            	        this.avatarUrl = data.attach_uri
            	    }
            	});
            },
            
            // 获取手机号
            getPhoneNumber(data) {
            	const _this = this;
            	uni.login({
            		provider: 'weixin',
            		success(res) {
                        console.log(res)
            			if (res.code) {
            				_this.$ajax('weixinGetData', {
            					encryptedData: data.detail.encryptedData,
            					iv: data.detail.iv,
            					code: res.code,
            					userToken: _this.$getSync('userToken'),
            				}).then(ret => {
            					// _this.show = false;
            					if (ret.status == 0) {
            						uni.setStorageSync('MOBILE', ret.data.mobile);
            						_this.getInfo()
            					} else {
            						_this.$toast(ret.message);
            					}
            				})
            			}
            		}
            	})
            },
            
            getInfo(){
            	this.$ajax('getInfo', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data.image_uri) {
                            this.avatarUrl = ret.data.image_uri
                        }
            			if (ret.data.nickname) {
            			    this.name = ret.data.nickname
            			}
                        if (ret.data.mobile) {
                            this.mobile = ret.data.mobile
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
		}
	}
</script>

<style lang="scss">
    .btn1{
        font-size: 26rpx;
        margin-left: 15rpx;
        background-color: #f5f5f5;
        border-radius: 50rpx;
    }
    .btn1::after {
        border: none;
    }
    
	page{
        background-color: #f5f5f5;
    }
    .info-name{
        color: #000;
        flex: 1;
    }
	.container{
		padding-top: 20rpx;
	}
	.box{
		background-color: #fff;
		padding: 0 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		color: #666666;
		padding: 20rpx 0;
	}
	.border-b{
		border-bottom: 2rpx solid #e6e6e6;
	}
	.img-box{
		position: relative;
	}
	
    
    .avatar-wrapper {
        width: 120rpx;
        height: 120rpx;
        margin: 0;
        padding: 0;
        background-color: rgba(0,0,0,0) !important;
        position: relative;
        
        &:after {
            border: none;
        }
    }
    .avatar{
    	width: 120rpx;
    	height: 120rpx;
    	border-radius: 50%;
    }
    
	.up{
		width: 100rpx;
		height: 33rpx;
		background-color: #f6f6f6;
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #9a9a9a;
		text-align: center;
		line-height: 33rpx;
		position: absolute;
		bottom: 0;
		left: 10rpx;
	}
	input{
		width: 630rpx;
		height: 74rpx;
		text-align: right;
	}
	.inp{
		color: #9a9a9a;
	}
	
    .btn {
        font-size: 34rpx;
    	margin: 110rpx 35rpx;
    	padding: 25rpx;
    	background: #00734c;
    	border-radius: 50rpx;
    	color: #FFFFFF;
    	text-align: center;
    }
	
	
</style>
